<template>
	<div class="userListForBatch">
		<group class="userListForBatchGroup">
			<div style="margin-top: 10px; margin-bottom: 10px">
				<span style="font-weight: bold; font-size: 18px; padding-left: 5px">{{title}}</span>
				<button-tab style="width: 120px; float: right; margin-bottom: 10px; margin-right: 10px">
					<button-tab-item selected @on-item-click="fetchData(0)">日</button-tab-item>
					<button-tab-item @on-item-click="fetchData(1)">周</button-tab-item>
					<button-tab-item @on-item-click="fetchData(2)">月</button-tab-item>
				</button-tab>
			</div>
		</group>

		<grid class="userListForBatchTitle" :show-vertical-dividers="false">
			<grid-item>
				<span class="grid-center">排名</span>
			</grid-item>
			<grid-item>
				<span class="grid-center">咨询</span>
			</grid-item>
			<grid-item>
				<span class="grid-center">到访</span>
			</grid-item>
			<grid-item>
				<span class="grid-center">试听</span>
			</grid-item>
			<grid-item>
				<span class="grid-center">电话</span>
			</grid-item>
			<grid-item>
				<span class="grid-center">原始单</span>
			</grid-item>
			<grid-item>
				<span class="grid-center">客户</span>
			</grid-item>
			<grid-item>
				<span class="grid-center">准客户</span>
			</grid-item>
			<grid-item>
				<span class="grid-center">销售额</span>
			</grid-item>
		</grid>

		<grid class="userListForBatchCell" v-for="(item, index) in items" :show-vertical-dividers="false">
			<grid-item class="grid-item" v-if="index < 5 || showMore">
				<span class="grid-center">{{(index + 1)}}</span>
			</grid-item>
			<grid-item class="grid-item" @click.native="onClick(item.id)" v-if="index < 5 || showMore">
				<span class="grid-center-link">{{item.nickname.substring(0,3)}}</span>
			</grid-item>
			<grid-item class="grid-item" v-if="index < 5 || showMore">
				<span class="grid-center">{{item.visitNumber}}</span>
			</grid-item>
			<grid-item class="grid-item" v-if="index < 5 || showMore">
				<span class="grid-center">{{item.demoNumber}}</span>
			</grid-item>
			<grid-item class="grid-item" v-if="index < 5 || showMore">
				<span class="grid-center">{{item.telNumber}}</span>
			</grid-item>
			<grid-item class="grid-item" v-if="index < 5 || showMore">
				<span class="grid-center">{{item.rawCusNumber}}</span>
			</grid-item>
			<grid-item class="grid-item" v-if="index < 5 || showMore">
				<span class="grid-center">{{item.cusNumber}}</span>
			</grid-item>
			<grid-item class="grid-item" v-if="index < 5 || showMore">
				<span class="grid-center">{{item.poCusNumber}}</span>
			</grid-item>
			<grid-item class="grid-item" v-if="index < 5 || showMore">
				<span class="grid-center">{{item.cusTotalAmount}}</span>
			</grid-item>
		</grid>
		<div style="text-align: center; background-color: lightyellow">
			<x-icon v-if="showMore == false" @click.native="showRecord" type="ios-arrow-down" size="30"></x-icon>
			<x-icon v-else @click.native="showRecord" type="ios-arrow-up" size="30"></x-icon>
		</div>

		<div v-transfer-dom>
			<popup v-model="show" height="100%">
				<div class="pickListPopupBatch">
					<group class="pickListPopupBatchBtn">
						<div style="float: left">
							<x-button class="pickListBtn" mini>已选：{{objectListValue.length}}个</x-button>
							<x-button class="pickListBtn" mini :gradients="['#FF5E3A', '#FF9500']" @click.native="assignWithNumber">随机分配</x-button>
						</div>
						<x-button class="pickListBtn" mini @click.native="cancelSelect">取消</x-button>
						<x-button class="pickListBtn" mini :gradients="['#FF5E3A', '#FF9500']" @click.native="completeListSelect">确定</x-button>
					</group>
					<group class="pickListPopupBatchList">
						<checklist class="pickCheckListBatch" :title="listTitle" ref="checkList" :options="objectList" v-model="objectListValue" @on-change="change"></checklist>
					</group>
				</div>
			</popup>
		</div>

		<div v-transfer-dom>
			<popup v-model="showRandomSelectPopup" :hide-on-blur=false height="270px" is-transparent>
				<div style="width: 95%;background-color:#fff;margin:0 auto;padding-bottom: 5px">
					<group>
						<group :title="titleRandom">
							<checker v-model="selection" style="margin-top: 20px" default-item-class="checkDefault" selected-item-class="checkDefaultSelected">
								<span style="margin-left: 5px;font-size: 13px;background-color: rgb(200, 2, 23);padding: 5px 5px; margin-right: 10px; color: white">渠道选择</span>
								<checker-item :value="item" v-for="(item, index) in selectionItems" :key="index">{{item.value}}</checker-item>
							</checker>
							<x-number class="numberSelection" v-model="number" :min="0" :max="totalSize" title="数量" fillable @on-change="changeNumber"></x-number>
						</group>
					</group>
					<flexbox>
						<flexbox-item>
							<x-button class="flexBtn_confirm" @click.native="completeRandomSelect">确定</x-button>
						</flexbox-item>
						<flexbox-item>
							<x-button class="flexBtn_cancel" @click.native="cancelRandomSelect">取消</x-button>
						</flexbox-item>
					</flexbox>
				</div>
			</popup>
		</div>

	</div>
</template>

<script>
	import NetWorking from '../../../../utils/networking'
	import bus from '@/event/eventBus'
	import dateutils from '@/utils/date'
	import {Group, Cell, XButton, Grid, GridItem, ButtonTab, ButtonTabItem, Checklist, TransferDom, Popup, Search, XNumber, Flexbox, FlexboxItem, Checker, CheckerItem} from 'vux'
	export default {
		name: "renew-contract-discovery",
		components: {
			Group,
			Cell,
			XButton,
			Grid,
			GridItem,
			ButtonTab,
			ButtonTabItem,
			Checklist,
			TransferDom,
			Popup,
			Search,
			XNumber,
			Flexbox,
			FlexboxItem,
			Checker,
			CheckerItem
		},
		directives: {
			TransferDom
		},
		data() {
			return {
				titleRandom: '',
				totalSize: 0,
				number: 0,
				showRandomSelectPopup: false,
				curUserId: '',
				show: false,
				title: '校区咨询列表',
				items: [],
				showMore: false,
				date: '',
				showSelectedItems: '',
				objectList: [],
				allObjectList: [],
				objectListValue: [],
				fullValues: [],
				autoFixed: false,
				value: '',
				selectedObjectList: [],
				listTitle: '原始客户名单',
				selection: '',
				selectionItems: [],
			}
		},
		created: function () {
			bus.$emit("userDefinedEvent", 2)
			bus.$emit("barController", 1)
			bus.$emit("setTopSimpleTitle", '待分配咨询名单')
			this.date = dateutils.getDate(new Date())
			this.fetchData(0)
		},
		watch: {
			selection: function () {
				let _this = this
				NetWorking.doGet(
					'customers/getCustomerNoByChannelTag',
					null,
					{
						params: {
							channel_tag: this.selection.value
						}
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							_this.totalSize = rs.number
							_this.titleRandom = "可分配数量：" + _this.totalSize + "个"
						}else{
							alert(rs.error_message)
						}
					}
				)
			}
		},
		methods: {
			cancelSelect: function () {
				this.objectListValue = []
				this.show = false
			},
			fetchData: function (type) {
				let _this = this
				NetWorking.doGet(
					'ai/sales/getSalesPerf',
					null,
					{
						params: {
							date: this.date,
							type: type,
						}
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							_this.items = rs.salesRankList
						}else{
							alert(rs.error_message)
						}
					}
				)
			},
			showRecord: function () {
				this.showMore = !this.showMore
			},
			onClick: function (id) {
				this.curUserId = id
				let _this = this
				NetWorking.doGet(
					'customers/not_assigned_customers',
					null,
					null,
					null
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							_this.allObjectList = rs.pop_list
							_this.objectList = _this.allObjectList
							_this.totalSize = _this.allObjectList.length
							_this.titleRandom = "可分配数量：" + _this.totalSize + "个"
						}else{
							alert(rs.error_message)
						}
					}
				)
				this.show = true
			},
			completeListSelect: function () {
				if(this.objectListValue.length < 1){
					this.show = false
					return
				}

				let _this = this
				NetWorking.doPost(
					'user_customer/assignCustomers',
					null,
					{
						strIds: JSON.stringify(this.objectListValue)
					},
					{
						params: {
							userId: this.curUserId,
							rolePlay: 'consultant'
						}
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							_this.fetchData(0)
							_this.objectListValue = []
							_this.show = false
						}else{
							alert(rs.error_message)
						}
					}
				)
			},
			change (val, label) {
			},
			onSubmit (val) {
				this.objectList = []
				var i
				for (i in this.allObjectList) {
					if (this.allObjectList[i].value.indexOf(val) > -1) {
						this.objectList.push(this.allObjectList[i])
					}
				}
			},
			onCancel () {
				console.log('on cancel')
			},
			onFocus () {
				console.log('on focus')
			},
			assignWithNumber: function () {
				this.show = false
				this.showRandomSelectPopup = true

				let _this = this
				NetWorking.doGet(
					'list_of_value/getListOfValueByType',
					null,
					{
						params: {
							type: 'S_LOV_MARKETING_CHANNEL'
						}
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							_this.selectionItems = rs.list_of_value

							if(_this.selectionItems.length > 0){
								_this.selection = _this.selectionItems[0]
							}
						}else{
							alert(rs.error_message)
						}
					}
				)
			},
			completeRandomSelect () {
				/*this.objectListValue = []
				for(let i=0; i<this.number; i++ ){
					if(this.number <= this.allObjectList.length){
						this.objectListValue.push(this.allObjectList[i].key)
					}
				}*/

				let _this = this
				NetWorking.doPost(
					'user_customer/assignCustomersRandom',
					null,
					null,
					{
						params: {
							userId: this.curUserId,
							rolePlay: 'consultant',
							number: this.number,
							channel_tag: this.selection.value
						}
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							_this.fetchData(0)
							_this.objectListValue = []
							_this.number = 0
							_this.show = false
						}else{
							alert(rs.error_message)
						}
					}
				)

				this.showRandomSelectPopup = false
			},
			cancelRandomSelect () {
				this.showRandomSelectPopup = false
			},
			changeNumber () {
			}
		}

	}
</script>

<style>
	.userListForBatch {
		margin-top: 46px;
	}

	.grid-center {
		display: block;
		text-align: center;
		color: #666;
		text-decoration: none;
	}

	.grid-center-name{
		display: block;
		text-align: center;
		color: #43abe3;
	}

	.userListForBatch > .weui-grids > .weui-grid {
		padding: 10px 0px;
		text-decoration: none;
		font-size: 12px;
	}

	.grid-item:after {
		border-bottom: 0px solid #D9D9D9 !important;
	}

	.userListForBatchTitle {
		background-color: lightgoldenrodyellow;
	}

	.userListForBatchCell {
		background-color: white;
	}

	.pickListBtn{
		float: right;
		margin: 5px !important;
	}

	.pickListCell {
		padding: 0px 15px !important;
		border-bottom: solid 1px;
		border-bottom-color: #ececec;
	}

	.pickListPopupBatch {
		margin-top: 46px;
		width:100%;
		height:100%;
	}

	.pickListPopupBatchList > .weui-cells {
		margin-top: 0em;
	}

	.pickCheckListBatch > .weui-cells > .weui-cell {
		padding: 0px 15px;
	}

	.checkDefault {
		border: 1px solid #ececec;
		padding: 5px 5px;
		background-color: white;
		margin-right: 10px;
		font-size: 13px;
		margin-bottom: 10px;
	}

	.checkDefaultSelected {
		background: #ffffff url(../../../../assets/img/icon_check.png) no-repeat right bottom;
		border-color: #ff4a00;
	}

	.numberSelection {
		padding: 0px 15px !important;
	}

	.numberSelection:before {
		left: 0px !important;
	}

</style>